<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>

<!--
    我们学过的指令：
        v-bind  ：单向绑定解析表达式，可简写为：xxx
        v-model ：双向数据绑定
        v-for   ：遍历数组/对象/字符串
        v-on    ：绑定事件监听，可简写为@
        v-if    ：条件渲染(动态控制节点是否存在)
        v-else  ：条件渲染(动态控制节点是否存在)
        v-show  ：条件渲染(动态控制节点是否展示)

        v-text指令：
            1.作用：向其所在节点中渲染的文本内容
            2.与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会

        v-html指令：
            1.作用：向指定节点中渲染包含html结构的内容
            2.与插值语法的区别：
                (1).v-html会替换掉节点中所有的内容，{{xxx}}
                (2).v-html可以识别html结构。
            3.严重注意：v-html有安全性问题！！！
                (1).在网站上动态渲染任意html是非常危险的，容易导致XSS攻击
                (2).一定要在可信的内容上使用v-html，永远不要在用户提交的内容上
-->
<!--准备好一个容器-->
<div class="root">
    <div>你好，{{name}}</div>
    <div v-text="name"></div>
    <div v-text="str"></div>
    <div v-html="str"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生成提示

    new Vue({
        el: '.root',
        data: {
            name:'尚硅谷',
            str:'<h2>尚硅谷</h2>'
        },


    })
</script>
</body>
</html>